<template>
  <Popup
      :round="round"
      v-model="visible"
      :transition-appear="true"
      :close-on-popstate="true"
      overlay-class="layer_wrap"
      @click-overlay="handleClose"
      :safe-area-inset-bottom="true"
      :close-on-click-overlay="false"
  >
    <div class="report-result" ref="elInside">
      <div class="report-result-top">
        <p class="name">{{ info?.patientName }}</p>
        <p class="button" @click="handleClose()">关闭&nbsp;{{ `${time / 1000}` }}s</p>
      </div>
      <div class="patient-wrap" :data-height="listHeight" :style="getStyle('inside')">
        <div class="flex-box" v-for="item in (info?.patientNumberList)">
          <div class="item flex-box-left">
            <p class="number"> {{ item.registerObjName }}</p>
            <p class="number" v-if="false&&info"> {{ item?.projectName || '检查项目' }}</p>
            <p class="dept">{{ item?.msg || '请耐心等待。' }}</p>
          </div>
          <div class="item flex-box-right" :class="getClassName(item)"/>
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import {Popup} from 'vant';
import {pxToVw} from "@/utils/common";

export default {
  name: 'ReportPatient',

  componentName: "ReportPatient",

  props: {
    visible: {
      type: Boolean,
      required: true
    },
    info: {
      type: Object,
      required: true
    },
  },

  components: {
    Popup,
  },

  data() {
    return {
      round: true,
      time: 60,
      timer: null,
      listHeight: 100,
    }
  },

  computed: {
    // 行内样式
    getStyle() {
      return function (row) {
        let obj = Object();
        switch (row) {
          case 'inside':
            let winHeight;
            // 获取窗口宽度
            if (window.innerWidth) {
              winHeight = window.innerHeight;
            } else if ((document.body) && (document.body.clientHeight)) {
              winHeight = document.body.clientHeight;
            }
            Reflect.set(obj, 'maxHeight', pxToVw(winHeight - 174 - 60 - 100 - 100))
            return obj;
        }
      }
    },

    // 定义className
    getClassName() {
      return function (val) {
        let state = parseInt(val.status);
        switch (state) {
          case 500:
            return 'icon-fail';
          case 200:
            return 'icon-success';
          default:
            return 'icon-success';
        }
      }
    },

    // 倒计时关闭时间
    countdownTime() {
      return this.info.time || 60
    },
  },

  mounted() {
    console.log('init')
  },

  methods: {
    handleClose() {
      const self = this;
      self.time = 60000
      clearInterval(self.timer);
      self.$emit('handle-cancel')
      self.$emit('handleCancel')
    }
  },

  watch: {
    visible: {
      handler: function (val) {
        const self = this;
        if (val) {
          self.$nextTick(() => {
            // let element = self.$refs?.elInside;
            // if (element) {
            //   const {height} = element.getBoundingClientRect();
            //   self.listHeight = height;
            // }
            if (val) {
              self.time = (self.info?.time || 60) * 1000;
              self.timer = setInterval(() => {
                self.time = self.time - 1000;
                if ((self.time <= 0)) {
                  self.handleClose();
                }
                console.log('1关闭倒计时')
              }, 1000)
            } else {
              clearInterval(self.timer)
              console.log('2关闭倒计时')
            }
          })
        }

      },
      deep: true,
      immediate: true
    },
  },

}
</script>

<style lang="scss" scoped>
@import "./assets/style";
</style>
